<template>
  <n-space justify="center">
    <n-carousel show-arrow autoplay>
      <n-space vertical class="carousel-img" justify="center" align="center" v-for="photo_ in photos" :key="photo_.index">
      <img :src="photo_.path" style="height: 100px; "/>
        {{ photo_.message }}
      </n-space>
    </n-carousel>
  </n-space>
</template>

<style>
.carousel-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  background-color: #daff8f;
  font-size: 30px;
}
</style>

<script lang="ts">
  import { defineComponent } from "@vue/runtime-core";
  import logo2 from '@/assets/logo2.png'
  import logo from '@/assets/logo.png'
  import logo3 from '@/assets/python-logo.png'
  export default defineComponent({
    setup(){
      return {
        photos: [
          {index: 0, message: '你好，世界！', path: logo2},
          {index: 1, message: '欢迎来到MiniJudge', path: logo2},
          {index: 2, message: '前端使用Vue', path: logo},
          {index: 3, message: '后端使用Python', path: logo3},
        ]
      }
    }
  })
</script>